// TODO:  发射任务设计报告
import React, { VFC, useState, useEffect} from "react"
import {Modal, Form, Input, Button, message, Space  } from 'antd';
import { useHistory } from "react-router-dom";;

import { 
    getTeamTaskDesignList, 
    getDetectEquipmentList2, 
    // saveTeamTaskDesign,
    setTeamComment, 
    getTeamComment
} from '@services/index';
// import { pick} from '@tools/utils'
import styled from "styled-components";

import NoInfo from '@components/noInfo';

const FormItem = Form.Item;
const { TextArea } = Input;

const DesignReport:VFC<any> = props => {
    const {teamId, isVisible, onCancel} = props;
    const tabPanes = ['1-5d','6-10d','11-15d']
    const {location} = useHistory() as any;
    const [defaultDay] = useState<any>(1);
    const [comment, setComment] = useState<any>(undefined)
    const [selected, setSelected] = useState<any>(1);
    const [isShow, setIsShow] = useState<boolean>(false);
    const [jsonDatas, setJsonDatas] = useState<any>({
        day1:{},
        day2:{},
        day3:{}
    });
    const params:any = {
        phaseId: location.state?.phaseId,
        teamId,
        projectId: JSON.parse(sessionStorage.userInfo).projectId
    }
     // const [loading, setLoading] = useState<boolean>(false)
    useEffect(()=>{
        init()
    }, [])
    const init = async () => {
        const { data, status } = await getDetectEquipmentList2({
            pageNum: 1,
            pageSize: 60,
            teamId,
            projectId: JSON.parse(sessionStorage.userInfo).projectId,
            day: defaultDay
        })
        if(status === '0'){
            const {list} = data
            getTeamTaskList(list)
        }
            // 回显
        getTeamComment(params).then(({status, data})=>{
            if(status === '0'){
                const {list} = data
                setComment(list?.length&&list[0].comment)
            }
        })
    }
    // 获取小组的飞行数据
    const getTeamTaskList = async (list:any) => {
        const { data, status } = await getTeamTaskDesignList({
            teamId,
            projectId: JSON.parse(sessionStorage.userInfo).projectId
        })
        if(status === '0'){
            Object.keys(data).forEach(k=>{
                const r = data[k]?.equipmentIds?.split(',').map((n: number)=>Number(n))
                const d = r?.map(item=>{
                    const s = list.find(k=>item === k.id)
                    return s?.name
                })
                if(data[k]){
                    data[k].equipmentIds = d.join(',')
                }else{
                    data[k] = {}
                }
            })
            
            let _day1 = Object.getOwnPropertyNames(data.day1), _day2 = Object.getOwnPropertyNames(data.day2), _day3 = Object.getOwnPropertyNames(data.day3);
            let _isShow = _day1.length>0||_day2.length>0||_day3.length>0?true:false;
            setIsShow(_isShow);
            setJsonDatas(data)
        }
    }

    // 提交表单数据
    const submit = async (type: string) => {
        if(!comment){
            message.error('请输入评语');
            return
        }
        // 0 未评论 1 通过 2 未通过
        params.pass = type=='Y' ? 1: 2
        params.comment = comment
        const { status } = await setTeamComment(params)
        if(status == '0'){
            message.success('提交成功');
            onCancel()
        }
    };
    return (
        <Modal title={'发射任务设计报告'} visible={isVisible} onCancel={onCancel} footer={false}>
            {isShow&& <>
                <XTabs className="dflex">
                    {tabPanes.map((item,index) => (
                        <div key={index} onClick={()=>setSelected(index+1)} className={selected==index+1?'selected':''}>{item}</div>
                    ))}
                </XTabs>
                <Form >
                    <FormItem label="巡视器总功耗/千瓦">
                        <span>{jsonDatas[`day${selected}`]?.equipmentIds||'-'}</span>
                    </FormItem>
                    <FormItem label="巡视器总功耗/千瓦">
                    <span>{jsonDatas[`day${selected}`]?.totalPower||'-'}W</span>
                    </FormItem>
                    <FormItem label="取得的成果">
                        <span>{jsonDatas[`day${selected}`]?.achievement||'-'}</span>
                    </FormItem>
                    <FormItem label="评语">
                        <TextArea  value={comment} onChange={e => setComment(e.target.value)} placeholder="请输入评语"/>
                    </FormItem>
                    <Space size={20} style={{display: 'flex',justifyContent: 'center'}}>
                        <Button type="primary" onClick={()=>submit('Y')}>通过</Button>
                        <Button onClick={()=>submit('N')}>不通过</Button>
                    </Space>
                </Form>
            </>
            }
            {!isShow&&<NoInfo />}
        </Modal>
    )
}
export default DesignReport

const XTabs = styled.div`
    margin-bottom: 1px;
    & div{
        margin: 0 50px 20px 0;
        color: #1A1816;
        font-weight: bold;
        cursor: pointer;
        background-size: 100% 100%;
        font-size: 16px;
    }
    & .selected {
        color: #1890ff;
        background-size: 100% 100%;
        color: #1890ff;
        background-size: 100% 100%;
        border-bottom: 2px solid;
    }
`